<template>
  <div class="cashPop txTlwrap" ref="cashPop">
    <div class="cashPop-main">
      <div class="cashPop_close">
        <!-- 余额提现 -->
        {{cashPopData.popTitle || '余额提现'}}
        <i @click="closeCashPop"></i>
      </div>
    </div>
    <div class="cashPop-main" v-if="jzb_is_opened==0 && tlfz_is_opened==0">
      <div class="balance_inputinfo" v-if="is_id_card!=0 && otherApply!=2">
        <div class="inputinfo">
          <span>身份证姓名</span>
          <input type="text"
                 placeholder="请填写您的真实姓名"
                 v-model="id_card_name"
                 @blur="scroll0" />
        </div>
        <div class="inputinfo inputinfo_bn">
          <span>身份证号</span>
          <input type="text"
                 placeholder="请填写您的身份证号"
                 v-model="id_card"
                 @blur="scroll0" />
        </div>
      </div>
      <div class="balance_inputinfo" v-if="id_card_front_back!=0 && otherApply!=2">
        <div class="upload" style="border:0;">
          <h3>身份证照片上传</h3>
          <div class="upload_box">
            <div class="upload_box_item">
              <input type="file" class="upload_image" ref="input_front" @change="frontChange" accept="image/png,image/jpeg,image/gif,image/jpg" />
              <img v-show="front_img" :src="front_img" alt="">
              <div class="add-text">身份证正面</div>
            </div>
            <div class="upload_box_item">
              <input type="file" class="upload_image" ref="input_back" @change="backChange" accept="image/png,image/jpeg,image/gif,image/jpg" />
              <img v-show="back_img" :src="back_img" alt="">
              <div class="add-text">身份证反面</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="cashCard" v-if="jzb_is_opened==1">
      <div class="cashCard-main" v-if="jzb_bank">
        <div class="card-wrap-title">{{jzb_bank.bank_name}}银行</div>
        <div class="card-wrap-num">{{jzb_bank.bank_number}}</div>
        <!-- <div class="card-wrap-tip">提现最低额度为10</div> -->
        <div class="card-wrap-btn" @click="Jump('/mb/user/bindCard')">
          <span>查看银行卡</span>
        </div>
      </div>
      <div class="cashCard-main" v-else>
        <div class="card-wrap-title">银行名称</div>
        <div class="card-wrap-num">银行卡号</div>
        <div class="card-wrap-btn" @click="Jump('/mb/user/bindCard')">
          <span>绑定银行卡</span>
        </div>
      </div>
    </div>

    <!-- 通联分账 -->
    <div class="cashCard" v-if="tlfz_is_opened==1">
      <div class="cashCard-main" v-if="tlfz_member_info.tlfz_bind_bank && tlfz_member_info.tlfz_bind_bank.length>0">
        <div class="card-wrap-title">银行卡号</div>
        <div class="card-wrap-num">{{tlfzCardNo}}</div>
        <div class="card-wrap-btn" v-if="cashPopData.tlObj.txType == 1" @click="ChangeCashCard">
          <span>切换银行卡</span>
        </div>
      </div>
      <!-- <div class="cashCard-main" v-else>
        <div class="card-wrap-title">银行名称</div>
        <div class="card-wrap-num">银行卡号</div>
        <div class="card-wrap-btn" @click="Jump('/mb/user/bindCard')">
          <span>绑定银行卡</span>
        </div>
      </div> -->
    </div>

    <div class="cashPop-main">
      <div v-if="jzb_is_opened==0 && tlfz_is_opened==0">
        <div class="select-pay-type clearfix">
          <div class="pay-title">到账账户</div>
          <div class="big_pay_type clearfix" :key="'pay_type'">
            <div class="payList yun" v-if="isWithdrawType(4)">
              <div :class="active==4?'active':''" @click="setActive(4)">
                <img :src="yunImg" alt />
                <span>云账户</span>
                <i></i>
              </div>
            </div>
            <div v-else class="payList">
              <div v-if="isWithdrawType(2)" :class="active==2?'active':''" @click="setActive(2)">
                <img :src="wxImg" alt />
                <span>微信</span>
                <i></i>
              </div>
              <div v-if="isWithdrawType(1)" :class="active==1?'active':''" @click="setActive(1)">
                <img :src="zfbImg" alt />
                <span>支付宝</span>
                <i></i>
              </div>
              <div v-if="isWithdrawType(3) " :class="active==3?'active':''" @click="setActive(3)">
                <img :src="ylImg" alt />
                <span>银联</span>
                <i></i>
              </div>
            </div>
          </div>
          <div class="cloud_pay" v-show="isWithdrawType(4)" :key="'dz_cloud_pay_type'">
            <label
                    v-if="in_array(1)"
                    :class="[cloud_type == 1 ? 'checked' : '']"
                    @click="setActive(1,'dz')"
            >
              <img :src="zfbImg" width="100%" alt />支付宝
            </label>
            <label
                    v-if="in_array(2)"
                    :class="[cloud_type == 2 ? 'checked' : '']"
                    @click="setActive(2,'dz')"
            >
              <img :src="wxImg" width="100%" alt />微信
            </label>
            <label
                    v-if="in_array(3)"
                    :class="[cloud_type == 3 ? 'checked' : '']"
                    @click="setActive(3,'dz')"
            >
              <img :src="ylImg" width="100%" alt />银联
            </label>
          </div>
        </div>
        <!-- 定制 卓缘健康 绑定银行卡，不显示标准系统的填写到账银行卡流程 start -->
        <template  v-if="((active == 3 && otherApply!=2) || (active == 4 && cloud_type == 3)) && zyjkStatus">
          <div class="balance_inputinfo bank-list" v-if="bankName && alipay_account">
            <div class="bank-title">{{bankName}}</div>
            <div class="bank-num">{{alipay_account}}</div>
            <div class="change-card" @click="onChangeBank()">换卡</div>
          </div>
          <div class="balance_inputinfo zyjk-add-bank" v-else @click="onChangeBank()"><img src="https://img.wifenxiao.com/h5-wfx/images/DZ/zyjk/add_bank.png">绑定银行卡</div>
        </template>
        <!-- 定制 卓缘健康 绑定银行卡 end -->
        <template v-else>
          <div v-if="(active == 3 && otherApply!=2) || (active == 4 && cloud_type == 3)" class="pay-yinhang">
            <div class="formitems">
              <div class="fi-name">
                <span class="colorRed">*</span>到账银行卡
              </div>
              <div class="form-controls">
                <div class="selc-style">
                  <span>{{bankName}}</span>
                  <svg-icon icon-class="icon_right"></svg-icon>
                </div>
                <select name="bank_id" class="select" v-model="bank">
                  <option value="0" selected>--请选择--</option>
                  <option
                          v-for="(val,key,index) in cashPopData.bankList"
                          :key="index"
                          :value="key"
                  >{{val}}</option>
                </select>
              </div>
            </div>
          </div>
          <div
                  v-if="(active == 3 && otherApply!=2) || (active == 4 && cloud_type == 3)"
                  class="balance_inputinfo pay-yinhang"
          >
            <div class="inputinfo">
              <span>开户行</span>
              <input
                      type="text"
                      placeholder="请填写开户行"
                      data-bank="{$user_behavior_jd.open_bank}"
                      v-model="open_bank"
                      @blur="scroll0"
              />
            </div>
          </div>
          <div
                  v-if="(active == 4 && cloud_type != 2) || (active == 3 && otherApply!=2) || (active!=2 && active !=4 && active != 3)"
                  class="balance_inputinfo pay-yinhang"
                  :class="[active==1?'zfbpay':'']"
          >
            <div class="inputinfo inputinfo_bn">
              <span>账户</span>
              <input type="text" placeholder="请填写账号" v-model="alipay_account" @blur="scroll0" :disabled="(otherApply==2?true:false)" />
            </div>
          </div>
        </template>
      </div>

      <!-- 定制 漫威 门店提现 start -->
      <div v-if="dzData.is_mw_dz"
           class="balance_inputinfo">
        <div class="formitems">
          <p class="fi-name">
            <i class="colorRed">*</i>
            <span v-if="dzData.store_info_dz">您提现的门店：{{dzData.shop_name}}</span>
            <span v-else>对不起，由于您没有门店，所以暂时无法提现。</span>
          </p>
        </div>
      </div>
      <!-- 定制 漫威 门店提现 end -->
      <div class="balance_inputinfo">
        <div class="money_number">
          <h3>提现金额</h3>
          <p>
            <b>{{mSymbol.name}}</b>
            <input type="text"
                   placeholder="请输入提现金额"
                   v-model="money"
                   @blur="scroll0" />
          </p>
          <!-- 见证宝获取验证码 -->
          <p class="phone-code" v-if="jzb_is_opened==1&&inToOutParam.isShow">
            <input class="phone-code-input" type="text" placeholder="输入验证码" v-model="inToOutParam.MessageCode" />
            <button class="phone-code-get" @click="onGetPhoneCodeClick">获取验证码</button>
          </p>
          <!-- 通联分账获取验证码 -->
          <p class="phone-code" v-if="!isTelCode && cashPopData.tlObj.tlfz_is_opened==1 && cashPopData.tlObj.txType == 2">
            <input class="phone-code-input" type="text" placeholder="输入验证码" v-model="verificationCode" />
            <button class="phone-code-get" @click="clickTxBtn(1)">获取验证码</button>
          </p>
          <div>
            <span>温馨提示</span>
            <p class="Tips"
               style="line-height: 20px;font-size: 13px;color: #999;font-weight: normal;border:0;">{{cashPopData.draw_alert}}</p>
          </div>
        </div>
      </div>
      <div class="balance_inputinfo" v-if="jzb_is_opened==0 && tlfz_is_opened==0">
        <div class="inputinfo" v-if="otherApply!=2">
          <span>账户姓名</span>
          <template  v-if="((active == 3 && otherApply!=2) || (active == 4 && cloud_type == 3)) && zyjkStatus">
            <input type="text"
                   placeholder="请选择银行卡"
                   v-model="balanceName"
                   readonly />
          </template>
          <template v-else>
            <input type="text"
                   placeholder="请填写您的真实姓名"
                   v-model="balanceName"
                   @blur="scroll0" />
          </template>
        </div>
        <div v-if="active == 2 && cashPopData.is_commission"
             class="inputinfo inputinfo_bn">
          <span>微信账号</span>
          <input type="text"
                 placeholder="请填写您提现的微信账号(非必填)"
                 v-model="wx_account_name"
                 @blur="scroll0" />
        </div>
      </div>
      <div class="balance_inputinfo" v-if="withdraw_need_phone == 1">
        <div class="inputinfo">
          <span>手机号码</span>
          <input type="text"
                 placeholder="请填写您的手机号码"
                 v-model="link_mobile"
                 @blur="scroll0" />
        </div>
      </div>
      <!--      <balance-text v-if="cashPopData.is_balance"-->
      <!--        :cashPopData="cashPopData"-->
      <!--        :money="money"></balance-text>-->

      <!--      &lt;!&ndash; 通联分账不展示手续费信息 &ndash;&gt;-->
      <!--      <commission-text v-else-if="cashPopData.is_commission && tlfz_is_opened==0"-->
      <!--        :cashPopData="cashPopData"-->
      <!--        :money="money"-->
      <!--        :active="active"-->
      <!--        :isWithdrawType="isWithdrawType"-->
      <!--        :in_array="in_array"></commission-text>-->
      <!--      <supplier-withdraw-text v-else-if="cashPopData.is_supplierWithdraw && tlfz_is_opened==0"-->
      <!--        :cashPopData="cashPopData"-->
      <!--        :money="money"></supplier-withdraw-text>-->
      <section class="old_apply_agreement"
               v-if="oldAgreenment"
               v-show="active != 4">
        <span class="agreenment">
          <van-checkbox v-model="agree"
                        checked-color="#E80001"
                        icon-size="16px"
                        ref="showOldAgreenment">
            我已阅读并同意
          </van-checkbox>
          <span class="J-showAgreement3-title"
                @click="showOldAgreement">{{cashPopData.withdraw_agreement_name}}</span>
        </span>
      </section>
      <div class="count_node clearfix">
        <div>
          <span
                  @click="clickTxBtn(2)"
                  class="count-btn count-ico"
                  :key="'wfx'">{{cashPopData.tlObj.tlfz_is_opened == 1 && cashPopData.tlObj.txType == 1 ? '确认提现':'申请提现通联'}}</span>
        </div>
      </div>
      <div class="agreement-cont">
        <div v-if="cashPopData.need_withdraw_apply_agreement != 0 && cashPopData.withdraw_apply_agreement"
             class="apply_agreement old_apply_agreement"
             v-show="showAgreement && active != 4 && !agree">
          <h3>协议正文</h3>
          <section class="txt">
            <p v-html="cashPopData.withdraw_apply_agreement"></p>
          </section>
        </div>
      </div>
    </div>
    <van-dialog v-model="showPwd"
                title="请输入支付密码"
                show-cancel-button
                confirm-button-color="#E80001"
                @confirm="confirm">
      <input v-model="password"
             type="password"
             name="password"
             class="password" />
    </van-dialog>

    <!-- 通联验证码弹窗确认提现 -->
    <!-- <van-dialog
      v-model="showTlDialog"
      title="确认提现"
      :show-confirm-button="false"
      :show-cancel-button="false"
      close-on-click-overlay
      class="common-confirm"
    >
      <div class="donation-box">
				<div class="con-box">
					<div class="input-box clearfix">
						<label for="">手机号码：</label><input class="readonly" type="number" name="tlMobile" value="18957147969" readonly/>
					</div>
					<div class="input-box clearfix">
						<label for="">验证码：</label><input type="number" name="tlCode" v-model="formTlDialog.code"/>
					</div>
				</div>
        <div class="btn-box">
          <div class="btn cancel-btn" @click="closeTlDialog">取消</div>
          <div class="btn confirm-btn" @click="clickTlConfirm">确认</div>
        </div>
			</div>
    </van-dialog> -->
    <van-popup
            v-model="showChangeCard"
            position="bottom"
            closeable
            :style="{ height: '50%' }"
    >
      <div class="bank-card-title">选择银行卡</div>
      <div class="bank-card-wrap">
        <van-radio-group
                v-model="checkBank"
                @change="GetCheckBank"
        >
          <van-radio
                  v-for="(item, index) in tlfzBindBank"
                  :name="item.id"
                  :key="index"
                  label-position="left"
          >
            <div class="bank-card-wrap-item">
              <span class="img">
                <img src="https://img.wifenxiao.com/h5-wfx/images/tlfz/bank_card.png"
                     alt="">
              </span>
              <span class="text">{{item.new_bank_name}}</span>
            </div>

          </van-radio>
        </van-radio-group>

        <div class="bank-card-wrap-item" @click="AddNewBankCard">
              <span class="img">
                <img src="https://img.wifenxiao.com/h5-wfx/images/tlfz/bank_add.png"
                     alt="">
              </span>
          <span class="text">新增银行卡</span>
        </div>
      </div>
    </van-popup>
    <!-- 定制 卓缘健康 换卡弹出框 start -->
    <van-popup v-model="zyjkBankList" position="top" :style="{ height: '100%' }" class="zyjk-pop" z-index="10002">
      <div class="cashPop-main">
        <div class="cashPop_close">
          银行卡
          <i @click="zyjkBankList=false"></i>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import { Toast, Popup } from 'vant'
  import commissionText from '../txPop/commission/index'
  import balanceText from '../txPop/balance/index'
  import supplierWithdrawText from '../txPop/supplierWithdraw/index'
  // 上传
  import { uploadImgs } from '@/api/community/article'
  // import UploadImg from '@/components/UploadImg'
  import { IdentityCodeValid, validateMobile } from '@/utils/validate'
  import { checkedPayPassword, getBalanceDraw, tlGetMember, companyPayByBackSMS, gysCompanyPayByBackSMS } from '@/api/user/member/memberApi'
  import { doTX, reqPostJzbSubInfo, queryAndAddDifference, reqPostJzbPayCode, reqPostJzbTransactionMsg } from '@/api/user/fxs/fxsApi'
  import Storage from '@/utils/store.js'
  import { doSupplierWithdraw } from '@/api/user/gys/gysApi'
  import { mapGetters } from 'vuex'
  // 定制 卓缘换卡组件
  import Vue from 'vue'
  import { Checkbox, RadioGroup, Radio } from 'vant'

  Vue.use(RadioGroup)
  Vue.use(Radio)
  Vue.use(Checkbox)
  Vue.use(Popup)

  export default {
    components: {
      commissionText,
      balanceText,
      supplierWithdrawText
      // UploadImg
    },
    props: {
      dzData: {
        type: Object,
        default: () => {
          const Obj = {
            is_mq_cloud: false,
            is_mw_dz: false
          }
          return Obj
        }
      },
      cashPopData: Object,
      otherApply: {
        type: [String, Number],
        default: 0
      },
      isTelCode: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        checkBank: undefined,
        wxImg: 'https://img.wifenxiao.com/h5-wfx/images/user/Pay/wx.png',
        zfbImg: 'https://img.wifenxiao.com/h5-wfx/images/user/Pay/zfb.png',
        ylImg: 'https://img.wifenxiao.com/h5-wfx/images/user/Pay/yl.png',
        yunImg: 'https://img.wifenxiao.com/h5-wfx/images/user/Pay/yzf.png',
        active: '',
        bank: '',
        bankName: '请选择银行',
        balanceName: '', // 姓名
        showPwd: false, // 支付密码弹框
        password: '',
        agree: true,
        mq_agree: true,
        showAgreement: true,
        is_id_card: null, // 是否开启需要填写身份证号码和姓名
        id_card_front_back: null, // 是否开启上传身份证正反面
        withdraw_need_phone: null, // 是否需要填写手机号
        id_card_name: '', // 身份证姓名
        id_card: '', // 身份证号
        front_img: '', // 身份证正面照片
        back_img: '', // 身份证反面照片
        alipay_account: '', // 账户
        wx_account_name: '', // 微信账号
        link_mobile: '', // 手机号
        money: '',
        open_bank: '', // 开户行
        code: null,
        is_mq: false,
        cloud_type: null, // 梦泉 云支付  支付方式
        user_behavior_jd: null,
        user_behavior_wechat: null,
        user_behavior_alipay: null,
        // 梦泉  云支付
        cloud_default_1: null,
        cloud_default_2: null,
        cloud_default_3: null,
        inToOutParam: {
          'TranAmount': '',
          'SerialNo': '',
          'MessageCode': '',
          'isShow': true,
          'cash': ''
        },
        jzb_is_opened: -1,
        jzb_bank: {},
        tlfz_is_opened: 0, // 通联分账
        tlfz_member_info: {},
        tlfzParams: {
          MessageCode: ''
        },
        // showTlDialog: false,
        // formTlDialog: {
        //   verification_code: '',
        //   biz_order_no: ''
        // }
        showChangeCard: false,
        bizOrderNo: '', // 通联提现订单号
        verificationCode: '', // 企业提现验证码
        tlfzCardNo: '', // 提现银行卡卡号
        txfzTxId: '', // 提现银行卡的ID
        tlfzBindBank: [ // 提现银行卡列表
          // {
          //   id: 1,
          //   name: '银行卡1'
          // },
          // {
          //   id: 2,
          //   name: '银行卡2'
          // },
          // {
          //   id: 3,
          //   name: '银行卡3'
          // },
          // {
          //   id: 4,
          //   name: '银行卡4'
          // },
          // {
          //   id: 5,
          //   name: '银行卡15'
          // },
          // {
          //   id: 6,
          //   name: '银行卡16'
          // },
          // {
          //   id: 17,
          //   name: '银行卡17'
          // },
          // {
          //   id: 18,
          //   name: '银行卡18'
          // },
          // {
          //   id: 19,
          //   name: '银行卡19'
          // }
        ],
        zyjkStatus: false, // 定制 卓缘
        zyjkBankList: false
      }
    },
    created() {
      this.init()
      const shop = this.$route.query.sid
      const mq_dz = this.$_shop('$_mq_cloud', shop)
      this.is_mq = mq_dz
      // 定制 卓缘健康
      const zyjk_dz = this.$_shop('$_zyjk', shop)
      this.zyjkStatus = zyjk_dz
    },
    methods: {
      scroll0() {
        window.scroll(0, 0)
        this.$refs.cashPop.scroll(0, 0)
      },
      init() {
        // console.log('hello哦')
        if (this.isWithdrawType(3)) this.active = 3
        if (this.isWithdrawType(1)) this.active = 1
        if (this.isWithdrawType(2)) this.active = 2
        if (this.isWithdrawType(4)) this.active = 4
        this.user_behavior_jd = this.cashPopData.user_behavior_jd
        this.user_behavior_wechat = this.cashPopData.user_behavior_wechat
        this.user_behavior_alipay = this.cashPopData.user_behavior_alipay
        // this.jzb_is_opened = this.cashPopData.jzb_is_opened
        this.is_id_card = this.cashPopData.is_id_card
        this.id_card_front_back = this.cashPopData.id_card_front_back
        this.withdraw_need_phone = this.cashPopData.withdraw_need_phone
        // console.log(this.cashPopData)
        // console.log('withdraw_need_phone:', this.withdraw_need_phone)
        if (this.cashPopData.jzb_is_opened) {
          this.jzb_is_opened = this.cashPopData.jzb_is_opened
        } else {
          this.jzb_is_opened = 0
        }
        // // console.log('jzb_is_opened:', this.jzb_is_opened)
        // 开通了见证宝
        if (this.jzb_is_opened == 1) {
          // console.log('jzb_is_opened: true')
          this.active = 6

          // 苏乃文说：修复见证宝佣金与微分销佣金不一致，以及修复为分账订单,不用处理接口返回结果
          queryAndAddDifference().then(res => {
            // console.log(res)
          })
          reqPostJzbSubInfo().then(res => {
            const cash = res.data.sub_info.SubAcctAvailBal
            this.inToOutParam.TranAmount = cash
            if (Number(this.inToOutParam.TranAmount) <= 0) {
              this.inToOutParam.isShow = false
            } else {
              this.inToOutParam.isShow = true
            }
            // console.log('jzb_is_opened: isShow: ', this.inToOutParam.isShow)
          }).catch(_ => {})
        } else {
          this.inToOutParam.isShow = false
        }
        this.jzb_bank = this.cashPopData.jzb_bank

        // 通联分账active为7
        this.tlfz_is_opened = this.cashPopData.tlObj.tlfz_is_opened || 0
        if (this.tlfz_is_opened == 1) {
          this.active = 7
        }
        this.tlfz_member_info = this.cashPopData.tlObj.member_info
        // 加判断解决报错
        if (this.cashPopData.tlObj.txType == 1) {
          if (this.tlfz_member_info && this.tlfz_member_info.tlfz_bind_bank && this.tlfz_member_info.tlfz_bind_bank.length > 0) {
            this.tlfzCardNo = this.tlfz_member_info.tlfz_bind_bank[0].card_no
            this.tlfzTxId = this.tlfz_member_info.tlfz_bind_bank[0].id
          }
        } else if (this.cashPopData.tlObj.txType == 2) {
          this.tlfzCardNo = this.cashPopData.company_member_info.account_no
          this.tlfzTxId = ''
        }
        this.cloud_default_1 = this.dzData.cloud_default_1
        this.cloud_default_2 = this.dzData.cloud_default_2
        this.cloud_default_3 = this.dzData.cloud_default_3
        this.bank = this.user_behavior_jd ? this.user_behavior_jd.bank_id : 0 // 默认银行id
        this.open_bank = this.user_behavior_jd
                ? this.user_behavior_jd.open_bank
                : '' // 默认银行名称
        this.code = this.cashPopData.code
        this.cloud_type = this.dzData.cloud_type
        // console.log(this.cashPopData.code, 'rrrr')
      },
      closeCashPop(data) {
        if (data) {
          this.$emit('closePop', data || '')
        } else {
          this.$emit('closePop')
        }
      },
      showOldAgreement() {
        this.agree = !this.agree
        // 定位到协议正文
        if (!this.agree) {
          this.$nextTick(() => {
            const applyAgreement = document.querySelector('.agreement-cont .apply_agreement')
            if (applyAgreement) {
              const scrollTop = document.querySelector('.agreement-cont').offsetTop
              document.querySelector('.cashPop').scrollTop = scrollTop
            }
          })
        }
      },
      isWithdrawType(type) {
        const index = this.cashPopData.withdraw_type.findIndex(item => {
          return item == type
        })
        return index == -1 ? 0 : 1
      },

      setActive(type, is_dz) {
        is_dz ? (this.cloud_type = type) : (this.active = type)
      },

      // uploadImg 抛出的图片参数
      uploadIdCard(file, type) {
        const form = new FormData()
        // console.log(file, 1222)
        form.append('file', file)
        uploadImgs(form).then(res => {
          const picUrl = res.data.pic_url
          if (res.status === 1) {
            if (type == 'front') {
              this.front_img = picUrl
            } else if (type == 'back') {
              this.back_img = picUrl
            }
          } else {
            Toast('上传失败, 请重新上传')
          }
        }).catch(() => {
          Toast('上传失败, 请重新上传')
        })
      },
      // 身份证正面
      frontChange() {
        const frontInputDOM = this.$refs.input_front
        const uploadType = 'front'
        // 通过DOM取文件数据
        const uploadFile = frontInputDOM.files[0]
        // console.log(uploadFile)
        this.uploadIdCard(uploadFile, uploadType)
      },
      backChange() {
        const backInputDOM = this.$refs.input_back
        const uploadType = 'back'
        // 通过DOM取文件数据
        const uploadFile = backInputDOM.files[0]
        // console.log(uploadFile)
        this.uploadIdCard(uploadFile, uploadType)
      },

      /**
       * 见证宝：获取手机验证码
       */
      onGetPhoneCodeClick() {
        reqPostJzbPayCode({
          'TranAmount': this.inToOutParam.TranAmount
        }).then(res => {
          if (res.status == 1) {
            this.$Error('手机验证码已发送')
            this.inToOutParam.SerialNo = res.data.pay_code.MessageOrderNo
          } else {
            this.$Error(res.msg)
          }
        }).catch(_ => {})
      },
      /**
       * 见证宝：入金转到出金
       * @param {function} cb callback
       */
      handleInToOutClick(cb) {
        if (!this.inToOutParam.MessageCode) {
          this.$Error('请输入手机验证码！')
          return
        }
        reqPostJzbTransactionMsg({
          'TranAmount': this.inToOutParam.TranAmount,
          'SerialNo': this.inToOutParam.SerialNo,
          'MessageCode': this.inToOutParam.MessageCode
        }).then(res => {
          if (res.status == 1) {
            typeof cb == 'function' && cb(res)
          } else {
            this.$Error(res.msg)
          }
        }).catch(_ => {})
      },
      // 申请提现按钮
      clickTxBtn(type) {
        const m = /^1\d{10}$/
        const e = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

        // 不是见证宝且不是通联分账
        if (this.active != 6 && this.active != 7) {
          // 实名验证判断
          if (this.is_id_card != 0 && this.otherApply != 2) {
            if (this.id_card_name == '') {
              this.$Error('身份证姓名不能为空！')
              return false
            }
            if (this.id_card == '') {
              this.$Error('身份证号不能为空！')
              return false
            } else if (!IdentityCodeValid(this.id_card)) {
              this.$Error('请输入18位有效身份证号！')
              return
            }
          }
          if (this.id_card_front_back != 0 && this.otherApply != 2) {
            if (this.id_card_front == '') {
              this.$Error('请上传正面身份证！')
              return false
            }
            if (this.id_card_back == '') {
              this.$Error('请上传反面身份证！')
              return false
            }
          }

          if (this.$refs.IDCard) {
            if (!IdentityCodeValid(this.id_card)) {
              this.$Error('请输入18位有效身份证号！')
              return
            }
          }
          if (this.otherApply != 2 && this.balanceName == '') {
            this.$Error('收款人姓名不能为空！')
            return false
          }
        }
        if (this.active == 4) {
          if (this.$refs.showAgreenment) {
            if (!this.mq_agree) {
              this.$Error(this.cashPopData.withdraw_agreement_tips)
              return false
            }
          }
        } else {
          if (this.$refs.showOldAgreenment) {
            if (!this.agree) {
              this.$Error(this.cashPopData.withdraw_agreement_tips)
              return false
            }
          }
        }
        if (this.active == 1) {
          if (!this.alipay_account) {
            this.$Error('支付宝收款账号不能为空！')
            return false
          }
          if (!m.test(this.alipay_account) && !e.test(this.alipay_account)) {
            this.$Error('请填写正确的支付宝账号！')
            return false
          }
        }
        // 通联分账的佣金提现
        let myRemainingCommission = 0
        if (this.cashPopData.tlObj.tlfz_is_opened == 1 && this.cashPopData.tlObj.txType == 1 && !this.cashPopData.tlObj.isyj) {
          // console.log('通联余额 个人')
          myRemainingCommission = this.cashPopData.tl_balance
        } else if (this.cashPopData.tlObj.tlfz_is_opened == 1 && this.cashPopData.tlObj.txType == 1 && this.cashPopData.tlObj.isyj == 1) {
          // console.log('通联佣金 个人')
          myRemainingCommission = this.cashPopData.tlfz_balance.all_amount
        } else if (this.cashPopData.tlObj.tlfz_is_opened == 1 && this.cashPopData.tlObj.txType == 1 && this.cashPopData.tlObj.isyj == 2) {
          // console.log('通联佣金 企业')
          myRemainingCommission = this.cashPopData.company_tlfz_balance.all_amount
        } else if (this.cashPopData.tlObj.tlfz_is_opened == 1 && this.cashPopData.tlObj.txType == 1 && this.cashPopData.is_GYS) {
          // console.log('通联GYS 个人')
          myRemainingCommission = this.cashPopData.tlfz_balance.all_amount
        } else if (this.cashPopData.tlObj.tlfz_is_opened == 1 && this.cashPopData.tlObj.txType == 2 && !this.cashPopData.is_GYS) {
          // console.log('通联GYS 企业')
          myRemainingCommission = this.cashPopData.company_tlfz_balance.all_amount
        }
        // console.log(this.money)
        // console.log(+myRemainingCommission)
        if (this.money > +myRemainingCommission) {
          if (this.cashPopData.is_balance) {
            this.$Error('输入金额不能大于余额！')
            return false
          }
        }
        // // console.log(this.money, this.cashPopData.max_tx_money)
        // if (
        //   this.cashPopData.max_tx_money > 0 &&
        //   this.money > +this.cashPopData.max_tx_money
        // ) {
        //   this.$Error('不能超出最高提现金额！')
        //   return false
        // }
        if (this.money <= 0) {
          this.$Error('输入金额不能小于0！')
          return false
        }
        // if (this.cashPopData.is_draw_int == 1) {
        //   if (
        //     isNaN(this.money) ||
        //     this.money % this.cashPopData.withdraw_multiple != 0
        //   ) {
        //     this.$Error(
        //       `请输入${this.cashPopData.withdraw_multiple}的倍数的提现金额！`
        //     )
        //     return false
        //   }
        // } else {
        //   if (this.cashPopData.withdraw_percentage > 0) {
        //     if (this.money > +this.cashPopData.max_tx_money) {
        //       this.$Error('输入金额不能大于提现最高金额！')
        //       return false
        //     } else if (this.money < +this.cashPopData.min_tx_money) {
        //       this.$Error('输入金额不能小于提现最低金额！')
        //       return false
        //     }
        //   } else {
        //     if (
        //       isNaN(this.money) ||
        //       this.money < +this.cashPopData.withdraw_start_amount
        //     ) {
        //       this.$Error(
        //         `请输入大于${this.cashPopData.withdraw_start_amount}元的提现金额！`
        //       )
        //       return false
        //     }
        //   }
        // }
        // 验证手机号
        if (this.withdraw_need_phone == 1) {
          if (this.link_mobile == '') {
            this.$Error('请填写手机号！')
            return false
          }
          if (!validateMobile(this.link_mobile)) {
            Toast('请输入正确的手机号码')
            return false
          }
        }
        if (this.active == 3 && this.otherApply != 2) {
          if (this.bank == 0) {
            this.$Error('请选择银行！')
            return false
          }
          if (this.open_bank == '') {
            this.$Error('开户银行不能为空！')
            return false
          }
          if (this.alipay_account == '') {
            this.$Error('收款账号不能为空！')
            return false
          }
        }
        if (this.cashPopData.must_pay_password) {
          this.$Error('请先去会员中心的修改资料里设置支付密码!')
          return false
        }
        if (this.cashPopData.popup_show) {
          this.showPwd = true
          return false
        }
        // console.log(this.active)
        if (this.active === 6 && this.inToOutParam.isShow) {
          // console.log(this.active, this.inToOutParam.isShow)
          this.handleInToOutClick(this._getBalanceDraw)
        } else {
          if (this.active == 7 && this.cashPopData.tlObj.txType == 2 && type == 1) { // 因为通联分账需要通过提现接口获取一个订单号
            // if (this.verificationCode == '') {
            //   this.$Error('请输入获取到的验证码！')
            //   return false
            // } else {
            //   this.companyPayByBackSMSFun()
            // }
            this._getBalanceDraw()
          } else { // 通联分账也走当前提现接口获取订单号
            this._getBalanceDraw()
          }
        }
      },
      // 供应商 通联分账企业提现
      gysCompanyPayByBackSMSFun() {
        if (this.verificationCode == '') {
          this.$Error('请输入获取到的验证码！')
          return false
        }
        const sendData = {
          biz_order_no: this.bizOrderNo,
          verification_code: this.verificationCode
        }
        gysCompanyPayByBackSMS(sendData).then(res => {
          if (res.status == 1) {
            if (res.data.sign_url) {
              window.location.href = res.sign_url
            } else {
              this.$Error(res.data.msg)
              // if (res.data.status == 1) {
              const myDate = new Date()
              const totalSeconds = Math.round(myDate.getTime() / 1000)
              setTimeout(window.location.reload(), 1000)
              Storage.saveLocal('time_status', totalSeconds)
              // }
            }
          } else {
            this.$Error(res.msg)
          }
        })
      },
      // 通联分账企业提现
      companyPayByBackSMSFun() {
        if (this.verificationCode == '') {
          this.$Error('请输入获取到的验证码！')
          return false
        }
        const sendData = {
          biz_order_no: this.bizOrderNo,
          verification_code: this.verificationCode
        }
        companyPayByBackSMS(sendData).then(res => {
          if (res.status == 1) {
            if (res.data.sign_url) {
              window.location.href = res.sign_url
            } else {
              this.$Error(res.data.msg)
              // if (res.data.status == 1) {
              const myDate = new Date()
              const totalSeconds = Math.round(myDate.getTime() / 1000)
              setTimeout(window.location.reload(), 1000)
              Storage.saveLocal('time_status', totalSeconds)
              // }
            }
          } else {
            this.$Error(res.msg)
          }
        })
      },

      // 切换银行卡
      ChangeCashCard() {
        tlGetMember().then(res => {
          if (res.status == 1) {
            this.tlfzBindBank = res.data.tlfz_bind_bank
            this.showChangeCard = true
            this.checkBank = res.data.tlfz_bind_bank[0].id
          } else {
            this.$Error(res.msg)
          }
        })
        // console.log('切换银行卡')
      },

      // 新增银行卡
      AddNewBankCard() {
        this.$JumpName(this, 'tlQualification', { addType: 1 })
      },

      // 选择银行卡直接生效
      GetCheckBank(val) {
        for (let i = 0; i < this.tlfzBindBank.length; i++) {
          if (val == this.tlfzBindBank[i].id) {
            this.tlfzCardNo = this.tlfzBindBank[i].card_no

            this.tlfzTxId = this.tlfzBindBank[i].id
          }
        }
      },

      // // 通联验证码弹窗确认提现
      // clickTlConfirm() {
      //   payByBackSMS(this.formTlDialog).then(res => {
      //     if (res.status == 1) {
      //       // console.log(res, '通联支付')
      //       this.$Error('申请成功')
      //       this.showTlDialog = false
      //     } else {
      //       this.$Error(res.msg)
      //     }
      //   })
      // },
      // // 通联验证码弹窗关闭
      // closeTlDialog() {
      //   this.showTlDialog = false
      // },

      in_array(idx) {
        const item = this.dzData.cloud_pay_now_type.find(val => {
          return idx == val
        })
        if (item) return true
      },
      // 输入密码确认
      confirm() {
        this._checkedPayPassword()
      },
      // 验证密码
      _checkedPayPassword() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        const data = { pay_password: this.password }
        checkedPayPassword(data).then(res => {
          if (res.status == 1) {
            if (res.data.status == 1) {
              if (this.active === 6 && this.inToOutParam.isShow) {
                // console.log(this.active, this.inToOutParam.isShow)
                this.handleInToOutClick(this._getBalanceDraw)
              } else {
                this._getBalanceDraw()
              }
            } else {
              this.$Error(res.data.msg)
              setTimeout(() => {
                window.location.reload()
              }, 1000)
            }
          } else {
            this.$Error(res.msg)
            setTimeout(() => {
              window.location.reload()
            }, 1000)
          }
        })
      },
      _getBalanceDraw() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        const data = {
          id_card: this.id_card,
          id_card_name: this.id_card_name,
          id_card_front: this.front_img,
          id_card_back: this.back_img,
          alipay_account: this.alipay_account,
          name: this.balanceName,
          money: this.money,
          type: this.active,
          cloud_type: this.cloud_type,
          bank_id: this.bank,
          open_bank: this.open_bank,
          code: this.code,
          link_mobile: this.link_mobile
        }
        if (this.tlfzTxId) {
          data.tlfz_bank_id = this.tlfzTxId
        }
        // 余额提现
        if (this.cashPopData.is_balance) {
          getBalanceDraw(data).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1 && res.data.status == 1) {
              this.$Error(res.data.msg)
              // 获取当前时间
              var myDate = new Date()
              var totalSeconds = Math.round(myDate.getTime() / 1000)
              setTimeout(() => {
                window.location.reload()
              }, 1000)
              Storage.saveLocal('time_status', totalSeconds)
            } else {
              this.$Error(res.msg)
            }
          })
        } else if (this.cashPopData.is_commission) {
          data.identity = this.cashPopData.identity
          data.wx_account_name = this.wx_account_name
          if (this.dzData.is_mw_dz) {
            data.store_id = this.dzData.store_id
          }
          if (this.tlfzTxId) {
            data.tlfz_bank_id = this.tlfzTxId
          }
          if (this.cashPopData.tlObj.tlfz_is_opened == 1) {
            if (this.cashPopData.tlObj.isyj == 1) {
              data.tlfz_tx_type = 0
            } else if (this.cashPopData.tlObj.isyj == 2) {
              data.tlfz_tx_type = 1
            }
          }
          if (this.bizOrderNo && this.cashPopData.tlObj.txType == 2) {
            this.companyPayByBackSMSFun()
          }
          // 佣金提现
          doTX(data).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              // 通联分账佣金提现
              // if (this.active == 7) {
              //   this.showTlDialog = true
              //   this.formTlDialog.biz_order_no = res.data.biz_order_no
              //   return false
              // }
              if (this.active == 7 && this.cashPopData.tlObj.txType == 2) {
                if (this.isTelCode) {
                  this.$Error(res.data.msg)
                  setTimeout(this.closeCashPop(1), 1000)
                } else {
                  this.bizOrderNo = res.data.biz_order_no
                }
              } else {
                if (res.data.sign_url) {
                  window.location.href = res.sign_url
                } else {
                  this.$Error(res.data.msg)
                  // if (res.data.status == 1) {
                  const myDate = new Date()
                  const totalSeconds = Math.round(myDate.getTime() / 1000)
                  setTimeout(window.location.reload(), 1000)
                  Storage.saveLocal('time_status', totalSeconds)
                  // }
                }
              }
            } else {
              this.$Error(res.msg.msg || res.msg)
            }
          })
        } else if (this.cashPopData.is_supplierWithdraw) {
          // 供应商收入提现
          if (this.tlfzTxId) {
            data.tlfz_bank_id = this.tlfzTxId
          }
          if (this.cashPopData.tlObj.tlfz_is_opened == 1) {
            if (this.cashPopData.tlObj.txType == 2) {
              data.tlfz_tx_type = 2
              // console.log('tlfz_tx_type1234', data.tlfz_tx_type)
            }
          }
          // console.log('供应商收入提现', this.bizOrderNo, this.cashPopData.tlObj.txType)
          if (this.bizOrderNo && this.cashPopData.tlObj.txType == 2) {
            // this.companyPayByBackSMSFun()

            this.gysCompanyPayByBackSMSFun()
            return
          }
          doSupplierWithdraw(data).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              if (this.active == 7 && this.cashPopData.tlObj.txType == 2) {
              this.bizOrderNo = res.data.biz_order_no
              if (this.isTelCode) {
                Toast(res.msg)
                setTimeout(this.closeCashPop(1), 1000)
              } else {
                // console.log('res.data', res.data)
                Toast(res.data.message)
              }
            } else {
              if (res.data.sign_url) {
                window.location.href = res.sign_url
              } else {
                this.$Error(res.data.message || res.msg)
                // if (res.data.status == 1) {
                const myDate = new Date()
                const totalSeconds = Math.round(myDate.getTime() / 1000)
                setTimeout(window.location.reload(), 1000)
                Storage.saveLocal('time_status', totalSeconds)
                // }
              }
            }
            } else {
              this.$Error(res.msg)
            }
          })
        }
      },
      Jump(path) {
        this.$JumpPath(this, path)
      },
      // 定制 卓缘健康 换卡
      onChangeBank() {
        this.zyjkBankList = true
      },
      chooseNowBank(item) {
        this.alipay_account = item.alipay_account
        this.balanceName = item.balanceName
        this.id_card = item.id_card
        this.open_bank = item.open_bank
        this.bank = this.id_card
        this.zyjkBankList = false
      },
      // 定制  漫威  门店提现  start
      noStore() {
        this.$Error('没有门店，无法提现')
      },
      // 定制  漫威  门店提现  end
    },
    computed: {
      isAgreenment() {
        let pass = false
        if (this.dzData.is_cloud_agreement != 0 && this.dzData.cloud_agreement) {
          pass = true
        }
        return pass
      },
      oldAgreenment() {
        let pass = false
        if (
                this.cashPopData.need_withdraw_apply_agreement != 0 &&
                this.cashPopData.withdraw_apply_agreement
        ) {
          pass = true
        }
        return pass
      },
      // 获取自定义符号
      ...mapGetters(['mSymbol'])
    },
    watch: {
      bank(val) {
        if (val == 0) {
          this.bankName = '请选择银行'
        } else {
          this.bankName = this.cashPopData.bankList[val]
        }
      },
      active(type) {
        this.open_bank = ''
        this.alipay_account = ''
        this.money = ''
        this.balanceName = ''
        // 银联
        if (type == 3) {
          if (this.user_behavior_jd) {
            this.alipay_account = this.user_behavior_jd.bank_code || ''
            this.balanceName = this.user_behavior_jd.name || ''
            this.id_card = this.user_behavior_jd.id_card || ''
            // 定制 卓缘健康 如果有开户行默认显示开户行
            if (this.zyjkStatus) {
              this.open_bank = this.user_behavior_jd.open_bank || ''
            }
          }
        }
        // 微信
        if (type == 2) {
          if (this.user_behavior_wechat) {
            this.balanceName = this.user_behavior_wechat.name || ''
            this.id_card = this.user_behavior_wechat.id_card || ''
          }
        }
        // 支付宝
        if (type == 1) {
          if (this.user_behavior_alipay) {
            this.alipay_account = this.user_behavior_alipay.alipay_account || ''
            this.balanceName = this.user_behavior_alipay.name || ''
            this.id_card = this.user_behavior_alipay.id_card || ''
          }
        }
      },
      cloud_type(type) {
        this.open_bank = ''
        this.alipay_account = ''
        this.money = ''
        this.balanceName = ''
        // 银联
        if (type == 3) {
          if (this.cloud_default_3) {
            if (this.cloud_default_3.alipay_account) {
              this.alipay_account = this.cloud_default_3.alipay_account
            } else if (this.user_behavior_jd) {
              this.alipay_account = this.user_behavior_jd.bank_code
            }
            if (this.cloud_default_3.payee) {
              this.balanceName = this.cloud_default_3.payee
            } else if (this.user_behavior_jd) {
              this.balanceName = this.user_behavior_jd.name
            }
            if (this.cloud_default_3.id_card) {
              this.id_card = this.cloud_default_3.id_card
            } else if (this.user_behavior_jd) {
              this.id_card = this.user_behavior_jd.id_card
            }
          }
        }
        // 微信
        if (type == 2) {
          if (this.cloud_default_2) {
            if (this.cloud_default_2.payee) {
              this.balanceName = this.cloud_default_2.payee
            } else if (this.user_behavior_wechat) {
              this.balanceName = this.user_behavior_wechat.name
            }
            if (this.cloud_default_2.id_card) {
              this.id_card = this.cloud_default_2.id_card
            } else if (this.user_behavior_wechat) {
              this.id_card = this.user_behavior_wechat.id_card
            }
          }
        }
        // 支付宝
        if (type == 1) {
          if (this.cloud_default_1) {
            if (this.cloud_default_1.alipay_account) {
              this.alipay_account = this.cloud_default_1.alipay_account
            } else if (this.user_behavior_alipay) {
              this.alipay_account = this.user_behavior_alipay.alipay_account
            }
            if (this.cloud_default_1.payee) {
              this.balanceName = this.cloud_default_1.payee
            } else if (this.user_behavior_alipay) {
              this.balanceName = this.user_behavior_alipay.name
            }
            if (this.cloud_default_1.id_card) {
              this.id_card = this.cloud_default_1.id_card
            } else if (this.user_behavior_alipay) {
              this.id_card = this.user_behavior_alipay.id_card
            }
          }
        }
      }
    }
  }
</script>


<style lang="scss">
  @import "src/styles/variables.scss";
  .txTlwrap{
    .bank-card-wrap {
      .van-radio__label.van-radio__label--left {
        width: 100%;
      }
      .van-radio {
        border-bottom: 2px solid #ddd;
        display: flex;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;

      }

      .van-radio__icon--round{
        font-size: 38px;
      }

    }
    .van-popup__close-icon{
      font-size: 44px;
    }

  }
  .txTlwrap {
    position: relative;
    height: 100%;
    overflow:auto;
    background-color: #f5f5f5;
    .cashPop_close {
      position: relative;
      font-weight: bold;
      font-size: 28px;
      color: #333;
      height: 92px;
      text-align: center;
      padding: 30px;
      background-color: #fff;
      i{
        position: absolute;
        right: 30px;
        top: 50%;
        display: inline-block;
        width: 28px;
        height: 28px;
        background: url("https://img.wifenxiao.com/h5-wfx/images/user/icon_del.png") center
        no-repeat;
        background-size: 100% 100%;
        transform: translateY(-50%);
      }
    }
    .cashCard {
      border-radius: 10px;
      margin: 20px 0;
      background:#fff url('https://img.wifenxiao.com/h5-wfx/images/user/balanceBg.png') center no-repeat;
      background-size: 100% 100%;
      position: relative;
      &-main{
        padding: 50px 50px;
        color: #333;
        .card-wrap-title {
          font-size: 28px;
        }
        .card-wrap-num{
          font-size: 34px;
          margin-top: 30px;
          margin-bottom: 50px;
        }
        .card-wrap-tip {
          font-size: 24px;
        }
        .card-wrap-btn {
          position: absolute;
          right: 50px;
          top: 45px;
          color: $light-blue;
        }
      }
    }

    &-main {
      background-color: #f5f5f5;
      .select-pay-type {
        margin:20px;
        // margin-top: 20px;
        padding: 0 30px;
        border-radius:20px;
        background-color: #fff;
        .pay-title {
          font-weight: normal;
          font-size: 28px;
          height: 100px;
          line-height: 100px;
        }
        .payList {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          div {
            // box-sizing: border-box;
            width: calc(97% / 2);
            // height: 90px;
            line-height: 90px;
            text-align: center;
            border: 2px solid #e9e9e9;
            font-size: 28px;
            color: #666666;
            margin-bottom: 20px;
            // padding: 10px;
            position: relative;
            img {
              display: inline-block;
              width: 60px;
              height: 60px;
              vertical-align: middle;
              margin-right: 10px;
            }
            span {
              font-size: 32px;
            }
            &.active {
              border-color: #f30c23;
              i {
                display: block;
                width: 41px;
                height: 35px;
                background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/select.png");
                background-repeat: no-repeat;
                background-position: 0 0;
                background-size: 100%;
                position: absolute;
                right: -1px;
                bottom: -2px;
              }
            }
          }
        }
        .cloud_pay {
          width: 750px;
          padding: 10px 20px;
          overflow: hidden;
          margin-left: -30px;
          label {
            position: relative;
            display: inline-block;
            float: left;
            width: calc(91% / 3);
            margin-bottom: 10px;
            box-sizing: border-box;
            border: 1px solid #efefef;
            font-size: 28px;
            color: #666;
            padding: 20px;
            text-align: center;
            margin-right: 3%;
            font-weight: 400;
            &.checked {
              border: 1px solid #f30c23;
              position: relative;
            }
            img {
              width: 48px;
              height: 48px;
              margin-right: 10px;
              vertical-align: middle;
            }
          }
        }
      }
      .balance_inputinfo {
        background-color: #fff;
        padding: 0;
        margin: 20px;
        border: 0;
        padding-left: 30px;
        margin: 20px;
        border-radius:20px;
        font-size: 28px;
        h3 {
          font-size: 28px;
          line-height: 90px;
          font-weight: normal;
        }
        // 上传身份证
        .upload_box{
          display: flex;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          align-items: center;
          padding: 20px 30px 20px 0;
          .upload_box_item{
            position: relative;
            width: 330px;
            height: 176px;
            margin-right: 30px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            &:first-child{
              background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/idcard_front.png');
            }
            &:last-child{
              margin-right: 0;
              background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/idcard_back.png');
            }
            .upload_image{
              position: absolute;
              left: 0;
              top: 0;
              display: block;
              width: 100%;
              height: 100%;
              opacity: 0;
              z-index: 10;
            }
            img{
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: 9;
            }
            .add-text{
              position: absolute;
              bottom: 0;
              left: 0;
              font-size: 24px;
              color: #fff;
              width: 100%;
              height: 56px;
              line-height: 56px;
              text-align: center;
              background-color: rgba(0,0,0,.4);
              border-radius:0px 0px 10px 10px;
              z-index: 11;
            }
          }
        }
        .money_number {
          padding-bottom: 4px;

          p {
            font-size: 40px;
            line-height: 56px;
            padding-bottom: 30px;
            padding-right: 30px;
            border-bottom: 2px solid #eee;
            b{
              font-weight:bold;
            }
            input {
              border: none;
              outline: none;
            }
          }
          .phone-code {
            margin-top: 30px;
            height: 90px;
            &-input {
              width: 50%;
              float: left;
            }
            &-get {
              color: $light-blue;
              float: right;
              outline: none;
              border: none;
              background: none;
            }
          }
          span {
            line-height: 92px;
            font-size: 26px;
            color: #999;
          }
          .Tips {
            line-height: 40px;
            font-size: 26px;
            color: #999;
            font-weight: normal;
            border: 0;
            margin-top: -10px;
          }
        }
        .inputinfo {
          border: 0;
          padding: 20px 0;
          padding-right: 30px;
          border-radius: 0;
          border-bottom: 1px solid #eee;
          display: flex;
          // justify-content: center;
          align-items: center;
          height: 100%;
          &:last-child {
            border: 0;
          }
          span {
            flex: 3;
            font-size: 28px;
            line-height: 50px;
          }
          input {
            border: none;
            flex: 7;
            height: 100%;
            text-align: right;
            font-size: 26px;
            color: #333;
          }
        }
        // 定制  门店提现  start
        .formitems {
          border: none;
          line-height: 60px;
          padding: 16px 0;
          padding-right: 30px;
          p {
            color: #333;
            font-size: 24px;
          }
          .colorRed {
            color: #ff0000 !important;
          }
        }
        // 定制  门店提现  end
      }
      .pay-yinhang {
        background-color: #fff;
        border: 0;
        padding: 0;
        padding-left: 30px;
        margin: 0;
        position: relative;
        &.zfbpay {
          margin: 20px;
          border-radius:20px;
        }
        .formitems {
          padding: 16px 0;
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
          .fi-name {
            // float: left;
            text-align: right;
            color: #333;
            font-size: 28px;
            font-weight: 400;
            line-height: 56px;
            span {
              color: #ff0000 !important;
            }
          }
          .form-controls {
            // float: right;
            // display: flex;
            // justify-content: flex-end;
            .selc-style {
              position: absolute;
              right: 0;
              top: 20px;
              z-index: 10000;
              width: calc(100% - 170px);
              height: 60px;
              text-align: right;
              padding-right: 30px;
              line-height: 56px;
              span {
                // position: absolute;
                display: inline-block;
                right: 50px;
                text-align: right;
                // top: 6px;
                font-size: 26px;
                color: #333;
              }
            }
            select {
              display: inline-block;
              padding: 8px 20px;
              padding-left: 54px;
              border: 1px solid #ccc;
              line-height: 40px;
              font-size: 26px;
              vertical-align: middle;
              color: #333;
              margin-bottom: -6px;
              position: absolute;
              right: 0;
              top: 20px;
              z-index: 10001;
              width: calc(100% - 85px);
              height: 60px;
              opacity: 0;
            }
          }
        }
      }
      .show_tip {
        padding: 20px 30px;
        // background-color: #fafafa;
        .tip_txt {
          display: block;
          font-size: 24px;
          line-height: 44px;
          color: #999;
          .colored {
            color: #ff0909;
          }
        }
      }
      .count_node {
        padding: 0 30px;
        margin-top: 30px;
        span {
          display: block;
          width: auto;
          height: 80px;
          line-height: 80px;
          text-align: center;
          color: #fff;
          border-radius: 80px;
          margin: 0px auto;
          margin: 20px 0;
          font-size: 28px;
          background: linear-gradient(
                          -90deg,
                          rgba(233, 1, 4, 1),
                          rgba(254, 27, 73, 1)
          );
          &.no-store {
            background-image: none;
            width: auto;
            background-color: #ccc;
          }
        }
      }
      .agreement-cont {
        padding: 20px 30px 10px;
        background-color: #f5f5f5;
        .apply_agreement {
          // margin: 10px 30px;
          background: #fff;
          text-align: left;
          border-radius: 10px;
          border: 2px dashed #bfbfbf;
          h3 {
            text-align: center;
            font-weight: bold;
            line-height: 40px;
            padding-top: 18px;
            font-size: 28px;
          }
          .txt {
            font-size: 24px;
            word-wrap: break-word;
            word-break: break-all;
            padding: 20px 16px;
          }
        }
      }
    }
    .apply_cloud_agreement,
    .agreenment {
      color: #999;
      font-size: 24px;
      width: 100%;
      text-align: left;
      margin-top: 4%;
      padding-left: 30px;
      position: relative;
      display: flex;
      align-items: center;
      p {
        color: #999;
        margin-right: 10px;
      }
      span {
        color: #4088ff;
        margin-right: 10px;
      }
      // input {
      //   border: none;
      //   margin-right: 4px;
      //   margin-top: -4px;
      //   position: absolute;
      //   margin-left: 2px;
      //   border: none;
      //   width: 30px;
      //   height: 30px;
      //   top: 4px;
      //   opacity: 0;
      // }
    }

    .password {
      width: 80%;
      height: 60px;
      display: block;
      margin: 40px auto;
      outline: none;
      border: none;
      border-radius: 5px;
      background-color: #f3f2f2;
    }

    // 通联提现验证码弹窗
    .donation-box{
      .con-box{
        position:relative;
        padding:40px 60px;
      }
      .input-box{
        margin:16px 0;
        font-size:28px;
        label{
          float:left;
          display:block;
          width:150px;
          line-height:76px;
          text-align:right;
          font-weight:normal;
          color: #666666;
        }
        input{
          float:left;
          -webkit-appearance: none;
          width:256px;
          height:76px;
          padding:16px 10px;
          border:2px solid #EDEDED;
          border-radius:6px;
          &.readonly{
            border:0;
          }
        }
      }
      .btn-box{
        display:flex;
        border-top:2px solid #ededed;
        .btn{
          width:50%;
          font-size:28px;
          line-height:94px;
          text-align:center;
          color:#333;
          &.confirm-btn{
            border-left:2px solid #ededed;
            color:#f20b22;
          }
        }
      }
    }

    .bank-card-title {
      font-size: 36px;
      font-weight: 500;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .bank-card-wrap {
      width: 100%;
      padding: 0px 32px;
      box-sizing: border-box;
      height: calc(100% - 100px);
      overflow: scroll;
      &-item {
        padding: 28px 0;
        width: 100%;
        box-sizing: border-box;
        .img {
          display: inline-block;
          width: 48px;
          height: 48px;
          vertical-align: -16px;
          img {
            width: 100%;
          }
        }
        .text {
          color: #333;
          line-height: 48px;
          font-size: 28px;
          margin-left: 30px;
        }
      }
      .part-yue {
        .pay-yue {
          .balance_money {
            color: #F21228;
          }
        }
      }
      .pay-else-title {
        padding-bottom: 28px;
        font-size: 30px;
        color: #333;
        font-weight: 400;
      }
    }
    // 卓缘健康
    .zyjk-add-bank {
      padding: 44px 0;
      text-align: center;
      font-size: 32px;
      img {
        width: 34px;
        margin-right: 14px;
        position: relative;
        top: 6px;
      }
    }
    .bank-list {
      padding: 32px;
      position: relative;
      .bank-title {
        font-size: 28px;
        color: #333;
        font-weight: 500;
      }
      .bank-num {
        font-size: 24px;
        color: #999;
        margin-top: 16px
      }
      .change-card {
        position: absolute;
        right: 32px;
        border: 2px solid #FF5E57;
        color: #FF5E57;
        width: 112px;
        padding: 8px 0;
        border-radius: 32px;
        text-align:center;
        top: 50%;
        margin-top: -24px;
      }
    }
    .zyjk-pop {
      background: #F7F7F7;
    }
  }

</style>
